<extend name="Public:base" />
<!--header end-->
<block name="title">
	<title>JHV登录页</title>
</block>


<block name="css">
	<link rel="stylesheet" href="__PUBLIC__css/login.css" />
</block>

<block name="js">
	<script type="text/javascript" src="__PUBLIC__js/m_reg.js"></script>
	<script>var bgurl = "__ROOT__/Public/Home/";</script>
	<script type="text/javascript" src="__PUBLIC__js/login.js"></script>
	<script src="__LAYER__/layer.js"></script>
	<script>
		$(document).ready(function() {
			$('#verify_img').click(function() {
				// alert(123)
				// 路径发生变化 就会重新请求数据 所以在路径后面拼接一个随机数 那样就会重新请求验证码
				var code_url = "{:U('Login/verify')}";
				// alert(indexOf)indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 没有返回-1
				if(code_url.indexOf('?') == -1){
					var src = code_url+'?'+Math.random();
				}else{
					var src = code_url+'&'+Math.random();
				}
				$(this).attr('src',src);//赋值
			});//click end

			$("#username").blur(function(){
				var value = $(this).val();
				var u_reg = Reg_Class.getConstant('USERNAME');
				var e_reg = Reg_Class.getConstant('EMAIL');
				var m_reg = Reg_Class.getConstant('MOBILE');
				if(!u_reg.test(value) && !e_reg.test(value) && !m_reg.test(value)){
					var index = layer.tips('用户名/手机/电子邮箱格式错误', $(this),{tips: [2, '#c00'],tipsMore: true});
					$(this).attr('index',index);
					$(this).removeClass('valid');
				}else{
					layer.close($(this).attr('index')); //此时你只需要把获得的index，轻轻地赋予layer.close即可
					$(this).addClass('valid');
				}
			})//blur end

			$("#password").blur(function(){
				var value = $(this).val();
				var reg = Reg_Class.getConstant('PASSWORD');
				if(!reg.test(value)){
					var index = layer.tips('密码格式错误', $(this),{tips: [2, '#c00'],tipsMore: true});
					$(this).attr('index',index);
					$(this).removeClass('valid');
				}else{
					layer.close($(this).attr('index')); //此时你只需要把获得的index，轻轻地赋予layer.close即可
					$(this).addClass('valid');
				}
			})//blur end

			$('#verify').blur(function(){
				var value = $(this).val();
				// alert(value);
				//正则
				var reg = Reg_Class.getConstant('VERIFY');
				// alert(reg.test(value))
				if(!reg.test(value)){
					// $('.verify').click();
					var index = layer.tips('验证码错误', $(this),{tips: [2, '#c00'],tipsMore: true});
					$(this).attr('index',index);
					$(this).removeClass('valid');

					return false;
				}else{
					layer.close($(this).attr('index')); //此时你只需要把获得的index，轻轻地赋予layer.close即可
					$(this).addClass('valid');

				}
				var self = $(this);
				//还需要ajax 判断验证码是否正确
				$.ajax({
					url: '{:U("Public/check_verify")}',
					data: 'code='+value,
				})
				.done(function(res) {
					// console.log(res);
					if(res == 1){
						var index = layer.tips('验证码正确', self,{tips: [2, 'green'],tipsMore: true});
						self.attr('index',index);
						self.addClass('valid');
					}else{
						var index = layer.tips('验证码错误', self,{tips: [2, '#c00'],tipsMore: true});
						self.attr('index',index);
						self.removeClass('valid');
					}
				});
			});//blur end


			//登录事件 提交按钮的点击事件 from的提交事件 回车
			$('#m_form').submit(function() {
				if($('.valid').length != 3){
					$('#m_form input').blur();
					return false;
				}
				// 全部数据格式正确
				// $(this).serialize() 得到from全部数据
				$.ajax({
					url: $(this).attr('action'),
					type: 'POST',
					// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
					data: $(this).serialize(),
				})
				.done(function(res) {
					console.log('res:',res);
					if(res.status){
						layer.msg(res.info, {time:2000,icon: 1,end: function(){
							window.location.href = res.url;
						}});
					}else{
						var index = layer.tips(res.info, $('#username'),{tips: [2, '#c00'],tipsMore: true});
						$('#username').attr('index',index);
						$('#username').removeClass('valid');
					}
				});
				return false;
			});

		});//ready
	</script>
</block>

		
<block name="body">
		<!--content-->

		<div class="content">

			<div class="container">

				<div class="logo">

						<a href="index.html"><img src="__PUBLIC__img/logo_02.png" alt="logo_02" class="img-responsive" /></a>

				</div>

				<div class="login_text">

					<div class="login_bg"></div>

					<h2>会员登录</h2>

					<form id="m_form" class="form-horizontal" action="{:U()}" role="form" method="post" >

						<div class="massage">

							<input name="username" value="{:cookie('home_username')}" type="text" class="form-control" id="username" placeholder="会员名/邮箱/手机号" />
							<input name="password" value="{:cookie('home_password')}" type="password" class="form-control" id="password" placeholder="密码" />
							<div style="position: relative">
							<input style="padding-left: 8px;height: 50px;" id="verify" name="verify" type="text" class="form-control"  placeholder="验证码" />
								<img style="position: absolute;top: 0px;right: 0px; cursor: pointer" id="verify_img" src="{:U('Login/verify')}" >
							</div>

						</div>

						<div class="checked">
							<label class="checkbox-inline pull-left">
								<input  name="remember" value="1" <if condition="cookie('home_remember')">checked</if> type="checkbox" />记住我
							</label>
						</div>
						<div class="login_button">
							<input  type="submit" value="登录"/>
						</div>
					</form>

				</div>

			</div>

		</div>

</block>


		



